<template>
  <view class="container">
    <!-- 全局提示组件 -->
    <wd-message-box />
    <wd-toast />

    <!-- 表单容器 -->
    <wd-form ref="formRef" :model="formData" :rules="formRules" @submit="handleSubmit">
      <wd-cell-group custom-class="group" title="设备信息" border>
        <!-- 设备类型单选 -->
        <wd-select-picker
          label="设备类型"
          label-width="120px"
          prop="deviceType"
          v-model="formData.deviceType"
          :columns="deviceTypes"
          value-key="value"
          label-key="text"
          placeholder="请选择设备类型"
          required
		  type="radio"
        />

        <!-- 设备名称输入 -->
        <wd-input
          label="设备名称"
          label-width="120px"
          prop="deviceName"
          v-model="formData.deviceName"
          placeholder="请输入设备名称"
          :maxlength="20"
          show-word-limit
          clearable
          required
        />

        <!-- 设备序列号输入 -->
        <wd-input
          label="设备序列号"
          label-width="120px"
          prop="serialNumber"
          v-model="formData.serialNumber"
          placeholder="请输入设备序列号"
          :maxlength="32"
          show-word-limit
          clearable
          required
        />

        <!-- 绑定长者单选 -->
        <wd-select-picker
          label="绑定长者"
          label-width="120px"
          prop="elderly"
          v-model="formData.elderly"
          :columns="elderlyList"
          value-key="id"
          label-key="name"
          placeholder="请选择绑定长者"
          required
		    type="radio"
        />
      </wd-cell-group>

      <!-- 提交按钮 -->
      <view class="form-footer">
        <wd-button 
          type="primary" 
          size="large" 
          block 
          :loading="submitting"
          @click="handleSubmit"
        >
          提交
        </wd-button>
      </view>
    </wd-form>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
// import { WdMessage, WdToast } from '@wotdesign/wd-ui'

// 表单数据模型
const formData = reactive({
  deviceType: '',  // 初始化为空字符串
  deviceName: '',
  serialNumber: '',
  elderly: null      // 初始化为null
})

// 设备类型选项（单选）
const deviceTypes = reactive([
  { text: '血压计', value: 'blood_pressure' },
  { text: '血糖仪', value: 'glucose_meter' },
  { text: '心电监测', value: 'ecg_monitor' },
  { text: '智能手环', value: 'smart_band' }
])

// 长者列表（单选）
const elderlyList = reactive([
  { id: 1, name: '张建国' },
  { id: 2, name: '李秀英' },
  { id: 3, name: '王建华' }
])

// 表单规则
const formRules = reactive({
  deviceType: [
    { required: true, message: '请选择设备类型' }
  ],
  deviceName: [
    { required: true, message: '请输入设备名称' },
    { min: 2, max: 20, message: '设备名称长度为2-20个字符' }
  ],
  serialNumber: [
    { required: true, message: '请输入设备序列号' },
    { pattern: /^[A-Za-z0-9]{6,32}$/, message: '序列号需为6-32位字母数字组合' }
  ],
  elderly: [
    { required: true, message: '请选择绑定长者' }
  ]
})

// 表单引用
const formRef = ref(null)
const submitting = ref(false)

// 生命周期钩子
onMounted(() => {
  // 模拟异步加载数据
  setTimeout(() => {
    elderlyList.value = [
      { id: 4, name: '陈丽华' },
      { id: 5, name: '赵卫东' }
    ]
  }, 1000)
})

// 表单提交处理
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    
    submitting.value = true
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    WdToast.success('提交成功')
    resetForm()
    uni.navigateBack({ delta: 1 })
  } catch (error) {
    WdMessage.error(error?.message || '提交失败')
  } finally {
    submitting.value = false
  }
}

// 表单重置
const resetForm = () => {
  formData.deviceType = ''
  formData.deviceName = ''
  formData.serialNumber = ''
  formData.elderly = null
  formRef.value.resetFields()
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0rpx;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f6 100%);
  min-height: 100vh;
}

</style>